<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<%@ taglib tagdir="/WEB-INF/tags" prefix="matrix"%>
<%@ taglib uri="http://matrixcsm.zkingsoft.com" prefix="cms"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta baidu-gxt-verify-token="2ea44d769ff34ab4cddbd254b89c2fd5">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp">
<title data-index="0" id="selextTitle">${网页标题 }</title>
<meta name="keywords" content="${网页关键词}">
<meta name="description" content="${网页描述 }" />
<!--[if lt IE 8]>
    <meta http-equiv="refresh" content="0;ie.html" />
    <![endif]-->
<link
	href="${path }/resource/plugin/bootstrap-3.3.5/css/bootstrap.min.css"
	rel="stylesheet" type="text/css">
<link
	href="${path }/resource/plugin/font-awesome/css/font-awesome.min.css"
	rel="stylesheet" type="text/css">
<link href="${path }/resource/css/styleOne/animate.min.css"
	rel="stylesheet" type="text/css" />
<link href="${path }/resource/css/visitor/base.css" rel="stylesheet"
	type="text/css">
<link rel="shortcut icon" href="${浏览器logo }">
<style>
.banner, .banner2 {
	width: 100%;
}

.banner img, .banner2 img {
	width: 100%;
}

.fun {
	padding-bottom: 100px;
}

.fun h2 {
	margin-top: 100px;
	font-family: "Microsoft YaHei";
	letter-spacing: 1px;
}

.fun ul {
	margin: 60px 0 0;
	overflow: hidden
}

.fun ul li {
	float: left;
	width: 18%;
	margin: 0 11px;
}

.fun ul li img {
	width: 100%
}

.banner2 {
	position: relative;
}

.banner2 a {
	position: absolute;
	color: #fff;
	background: #ff8e0e;
	top: 52%;
	left: 56.8%;
	display: block;
	width: 135px;
	height: 45px;
	line-height: 45px;
	font-size: 16px;
	text-align: center;
	border-radius: 8px;
}

.banner2 a:hover {
	background: #f5890f
}

.case {
	padding-bottom: 60px;
	margin-top: 100px;
}

.case ul {
	margin-top: 60px
}

.case ul li {
	margin: 0 18px 30px;
	width: 30%;
	float: left;
}

.case ul li img {
	width: 100%;
	border-radius: 12px;
}

.news {
	padding-bottom: 100px;
}

.news ul {
	margin-top: 60px;
}

.news ul li {
	position: relative;
	border-left: 4px solid #75aecf;
	margin-bottom: 60px;
	min-height: 124px;
	padding-right: 40px;
}

.news h4 {
	font-size: 20px;
	margin-bottom: 15px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	word-break: break-all;
}

.news h4 a {
	color: #333;
}

.news p {
	color: #aaaaaa;
	font-size: 14px;
	line-height: 25px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	word-break: break-all;
}

.news p a {
	color: #aaaaaa;
}

.news span {
	color: #a7b8c2;
	font-size: 16px;
	position: absolute;
	bottom: 0;
}

.carousel-control.left {
	background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0,
		rgba(0, 0, 0, 0) 0)
}

.carousel-control.right {
	background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0,
		rgba(0, 0, 0, 0) 0)
}
</style>
</head>
<body class="">
	<jsp:include page="_top.jsp"></jsp:include>
	<div class="banner">
		<cms:ad var="gttt" code="banner"></cms:ad>
		<div id="myCarousel" class="carousel slide" data-ride="carousel">
			<!-- 轮播（Carousel）指标 -->
			<ol class="carousel-indicators">
				<c:forEach items="${gttt }" var="item" varStatus="count">
					<li data-target="#myCarousel" data-slide-to="${count.index}"
						<c:if test="${count.index eq 0 }">class="active"</c:if>></li>
				</c:forEach>
			</ol>
			<!-- 轮播（Carousel）项目 -->
			<div class="carousel-inner">
				<c:forEach items="${gttt }" var="item" varStatus="count">
					<div class='<c:if test="${count.index eq 0 }">active</c:if> item'>
						<a href="${item.adUrl}"> <img src="${item.adImg }"
							alt="${item.adTitle}"></a>
					</div>
				</c:forEach>
			</div>
			<!-- 轮播（Carousel）导航 -->
			<a class="carousel-control left" href="#myCarousel" data-slide="prev"></a>
			<a class="carousel-control right" href="#myCarousel"
				data-slide="next"> </a>
		</div>
	</div>
	<div id="app">
		<div class="fun">
			<div class="container">
				<cms:ad var="a" code="ad1" multi="false"></cms:ad>
				<h2 class="text-center">${a.colName}</h2>
				<cms:ad var="gg1" code="ad1"></cms:ad>
				<ul>
					<c:forEach items="${gg1}" var="item">
						<li><img alt="${item.adTitle }" src="${item.adImg }"></li>
					</c:forEach>
				</ul>
			</div>
		</div>
		<div class="banner2">
			<cms:ad var="ban2" code="banner2" multi="false"></cms:ad>
			<img alt="${ban2.adTitle }" src="${ban2.adImg }"> <a
				href="${ban2.adUrl}" class="">立即建站</a>
		</div>
		<div class="case">
			<div class="container">
				<cms:ad var="a" code="ad2" multi="false"></cms:ad>
				<h2 class="text-center">${a.colName}</h2>
				<cms:ad var="gg2" code="ad2"></cms:ad>
				<ul>
					<c:forEach items="${gg2}" var="item">
						<li><a href="${item.adUrl }"><img alt="${item.adTitle }"
								src="${item.adImg }"></a></li>
					</c:forEach>
				</ul>
			</div>
		</div>
		<div class="news">
			<div class="container">
				<cms:artType var="item" code="news"></cms:artType>
				<h2 class="text-center">${self.artTypeName }</h2>
				<ul class="row">
					<li v-for="art in arts" class="col-md-6">
						<h4>
							<a target="blank"
								:href="'${path}/redirect/article?id='+art.artId">
								{{art.artTitle}}</a>
						</h4>
						<p>
							<a target="blank"
								:href="'${path}/redirect/article?id='+art.artId">{{art.artAbstract}}</a>
						</p> <span>{{art.artCreatetiem | getTime }}</span>
					</li>
				</ul>
			</div>
		</div>
	</div>
	<jsp:include page="_foot.jsp"></jsp:include>
	<script type="text/javascript"
		src="${path }/resource/js/plugin/jquery-2.1.4.min.js"></script>
	<script type="text/javascript"
		src="${path }/resource/js/systools/AjaxProxy.js"></script>
	<script type="text/javascript"
		src="${path }/resource/plugin/bootstrap-3.3.5/js/bootstrap.min.js"></script>
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<script>
		var app = new Vue(
				{
					el : '#app',
					data : {
						arts : []
					},
					filters : {
						getTime : function(value) {
							var data = new Date(value);
							var Y = data.getFullYear();
							var M = data.getMonth() + 1;
							var D = data.getDate();
							var H = data.getHours();
							var i = data.getMinutes();
							var s = data.getSeconds();
							if (M < 10) {
								M = "0" + M;
							}
							if (D < 10) {
								D = "0" + D;
							}
							if (H < 10) {
								H = "0" + H;
							}
							if (i < 10) {
								i = "0" + i;
							}
							if (s < 10) {
								s = "0" + s;
							}
							return Y + "-" + M + "-" + D + "  " + H + ":" + i
									+ ":" + s;
						}
					},
					methods : {
						toArticle : function(id) {
							window.open("${path}/redirect/article?id=" + id);
						},
						loadArt : function() {
							$.AjaxProxy({
								c : false,
							/* p : {
								"offset" : app.offset,
								"limit" : app.limit,
							} */
							}).invoke(
									"${path}/findNews?artTypeId=38",
									function(loj) {
										app.arts = app.arts.concat(loj
												.getValue("rows"));
										console.log(app.arts.artTypeName)
									});
						}
					},
				});
		app.loadArt();
		$("#toTop").click(function functionName() {
			$('body,html').animate({
				scrollTop : 0
			}, 500)
		})
		$(".suspend").mouseover(function() {
			$(this).stop();
			$(this).animate({
				width : 156
			}, 400);
		});
		$(".suspend").mouseout(function() {
			$(this).stop();
			$(this).animate({
				width : 36
			}, 400);
		});
		$(window).bind(
				"scroll",
				function() {
					var curTop = $(this).scrollTop();
					var scrollTop = document.body.scrollTop
							|| document.documentElement.scrollTop;
					var offsetTop1 = $(".fun").offset().top;
					var clientHeight1 = $(".fun").css("height")
					if (curTop + scrollTop > offsetTop1
							- parseInt(clientHeight1)) {
						$(".fun").addClass('animated fadeInDown fadeIn');
					}
					var offsetTop2 = $(".case").offset().top;
					if (curTop + scrollTop > offsetTop2) {
						$(".case").addClass('animated fadeInDown fadeIn');
					}
				})
		$("#nav").find("li").eq(0).addClass("active");
	</script>

</body>
</html>
